<template>
  <div class="post_parent_list">
    <!-- 贴文列表 -->
    <div class="post_list_item">
      <div class="item_header">
        <!-- 头像 -->
        <router-link :to="'/PersonView/' + user_id">
          <div>
            <img :src="headerImg" alt="" />
          </div>
        </router-link>
        <!-- 隐藏/显示用户信息弹窗 -->
        <div class="popcard">
          <div class="popcard_panel">
            <!-- 头部背景 -->
            <div class="popcard_header">
              <img :src="headerBgImg" alt="" class="ex-picture-img" />
              <!-- 定位头像和信息 -->
              <div class="pop_h">
                <router-link :to="'/PersonView/' + user_id">
                  <img :src="headerImg" alt="" class="pop_h_img"
                /></router-link>
              </div>
              <div class="pop_name">{{ nickname }}</div>
              <div class="pop_auth">
                {{ $t("postlist.auth_msg")
                }}<span v-if="auth_id == 1">{{
                  $t("postlist.auth_personal")
                }}</span
                ><span v-if="auth_id == 2">{{
                  $t("postlist.auth_orgnaztion")
                }}</span>
              </div>
              <div class="u_fo">
                <!-- 当前用户本人不显示关注按钮 -->
                <div v-if="user_id != current_user_id">
                  <!-- 读取判断关注状态 -->
                  <div v-if="is_fo == 1">
                    <!-- 当前用户关注了发帖人 -->
                    <el-button size="mini" @click="cancelfoUser" round>{{
                      $t("postlist.followbtn.unfollow")
                    }}</el-button>
                  </div>
                  <div v-else-if="is_fo == 2">
                    <!-- 互相关注 -->
                    <el-button size="mini" @click="cancelfoUser" round>{{
                      $t("postlist.followbtn.followbetween")
                    }}</el-button>
                  </div>
                  <div v-else-if="is_fo == 3">
                    <!-- 当前发帖人关注了当前用户 -->
                    <el-button size="mini" @click="foUser" round>{{
                      $t("postlist.followbtn.follower")
                    }}</el-button>
                  </div>
                  <div v-else>
                    <!-- 双方都没有相互关注 -->
                    <el-button size="mini" @click="foUser" round>{{
                      $t("postlist.followbtn.follow")
                    }}</el-button>
                  </div>
                </div>
              </div>
            </div>
            <!-- 基本信息 -->
            <div class="popcard_info">
              <!-- 个性化信息 -->
              <div class="pop_info">
                {{ user_info }}
              </div>
              <!-- 关注/被关注 -->
              <div class="pop_fo">
                <span
                  ><b>{{ user_fo }}</b> {{ $t("postlist.user_fo") }}</span
                >
                <span
                  ><b>{{ user_fans }}</b> {{ $t("postlist.user_fans") }}</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 回复连接线 -->
      <div class="reply_line"></div>
      <div class="item_content">
        <!-- 账号信息容器 -->
        <div class="account_panel">
          <!-- 左边账号信息 -->
          <div>
            <div class="account">
              <div class="name">
                <router-link :to="'/PersonView/' + user_id">
                  {{ nickname }}
                </router-link>
              </div>
              <!-- 用户认证 -->
              <div
                v-if="auth_id == 1"
                :title="$t('postlist.auth_personal')"
                class="auth personal"
              >
                <svg viewBox="0 0 22 22">
                  <g>
                    <path
                      d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z"
                    ></path>
                  </g>
                </svg>
              </div>
              <div
                v-if="auth_id == 2"
                :title="$t('postlist.auth_orgnaztion')"
                class="auth organizaion"
              >
                <svg viewBox="0 0 22 22">
                  <g>
                    <path
                      d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z"
                    ></path>
                  </g>
                </svg>
              </div>
              <!-- 用户认证结束 -->
              <div class="acc">@{{ username }}</div>
              <!-- <div class="date">{{ post_day }}</div> -->
            </div>
            <div class="tip">内测用户</div>
          </div>
          <!-- 右边更多 -->
          <div>
            <el-popover placement="bottom-end" width="260" trigger="click">
              <div class="pop_panel">
                <!-- 删除 -->
                <div
                  class="item"
                  v-if="user_id == current_user_id"
                  @click="delPostByUserId"
                >
                  <div class="ico">
                    <svg viewBox="0 0 24 24" class="del">
                      <g>
                        <path
                          d="M16 6V4.5C16 3.12 14.88 2 13.5 2h-3C9.11 2 8 3.12 8 4.5V6H3v2h1.06l.81 11.21C4.98 20.78 6.28 22 7.86 22h8.27c1.58 0 2.88-1.22 3-2.79L19.93 8H21V6h-5zm-6-1.5c0-.28.22-.5.5-.5h3c.27 0 .5.22.5.5V6h-4V4.5zm7.13 14.57c-.04.52-.47.93-1 .93H7.86c-.53 0-.96-.41-1-.93L6.07 8h11.85l-.79 11.07zM9 17v-6h2v6H9zm4 0v-6h2v6h-2z"
                        ></path>
                      </g>
                    </svg>
                  </div>
                  <div class="txt del">{{ $t("postlist.more.delete") }}</div>
                </div>
                <!-- 消息兴趣 -->
                <div v-if="user_id != current_user_id">
                  <div class="item">
                    <div class="ico">
                      <svg viewBox="0 0 24 24">
                        <g>
                          <path
                            d="M11.57 11.96l.99-.79c.33-.26.56-.53.7-.8.15-.27.22-.57.22-.91 0-.41-.12-.74-.38-.97s-.62-.35-1.09-.35-.85.12-1.13.37c-.26.25-.4.59-.4 1.03 0 .2.03.42.08.65l-2.07-.15c-.06-.29-.09-.55-.09-.79 0-.84.33-1.51.98-2.01.67-.49 1.55-.74 2.66-.74 1.17 0 2.07.24 2.71.73.63.48.95 1.16.95 2.04 0 .98-.47 1.86-1.4 2.65l-.87.73c-.17.15-.29.28-.36.4-.06.11-.09.26-.09.45v.46h-2.1v-.67c0-.3.06-.55.17-.75.12-.2.29-.39.52-.58zm-.52 5.17c.24.25.56.37.93.37.39 0 .7-.12.94-.37.25-.25.37-.56.37-.94 0-.39-.12-.7-.37-.95-.24-.25-.55-.37-.94-.37-.37 0-.69.12-.93.37s-.36.56-.36.95c0 .38.12.69.36.94zM22.25 12c0 5.66-4.59 10.25-10.25 10.25S1.75 17.66 1.75 12 6.34 1.75 12 1.75 22.25 6.34 22.25 12zM12 20.25c4.56 0 8.25-3.69 8.25-8.25S16.56 3.75 12 3.75 3.75 7.44 3.75 12s3.69 8.25 8.25 8.25z"
                          ></path>
                        </g>
                      </svg>
                    </div>
                    <div class="txt">{{ $t("postlist.more.notlike") }}</div>
                  </div>
                </div>
                <!-- 关注选项 -->
                <div v-if="user_id != current_user_id">
                  <div
                    class="item"
                    v-if="is_fo == 0 || is_fo == 3"
                    @click="foUser"
                  >
                    <div class="ico">
                      <svg viewBox="0 0 24 24">
                        <g>
                          <path
                            d="M10 4c-1.105 0-2 .9-2 2s.895 2 2 2 2-.9 2-2-.895-2-2-2zM6 6c0-2.21 1.791-4 4-4s4 1.79 4 4-1.791 4-4 4-4-1.79-4-4zm13 4v3h2v-3h3V8h-3V5h-2v3h-3v2h3zM3.651 19h12.698c-.337-1.8-1.023-3.21-1.945-4.19C13.318 13.65 11.838 13 10 13s-3.317.65-4.404 1.81c-.922.98-1.608 2.39-1.945 4.19zm.486-5.56C5.627 11.85 7.648 11 10 11s4.373.85 5.863 2.44c1.477 1.58 2.366 3.8 2.632 6.46l.11 1.1H1.395l.11-1.1c.266-2.66 1.155-4.88 2.632-6.46z"
                          ></path>
                        </g>
                      </svg>
                    </div>
                    <div class="txt">
                      {{ $t("postlist.more.follow") }} @{{ username }}
                    </div>
                  </div>
                  <div class="item" @click="cancelfoUser" v-else>
                    <div class="ico">
                      <svg viewBox="0 0 24 24">
                        <g>
                          <path
                            d="M10 4c-1.105 0-2 .9-2 2s.895 2 2 2 2-.9 2-2-.895-2-2-2zM6 6c0-2.21 1.791-4 4-4s4 1.79 4 4-1.791 4-4 4-4-1.79-4-4zm12.586 3l-2.043-2.04 1.414-1.42L20 7.59l2.043-2.05 1.414 1.42L21.414 9l2.043 2.04-1.414 1.42L20 10.41l-2.043 2.05-1.414-1.42L18.586 9zM3.651 19h12.698c-.337-1.8-1.023-3.21-1.945-4.19C13.318 13.65 11.838 13 10 13s-3.317.65-4.404 1.81c-.922.98-1.608 2.39-1.945 4.19zm.486-5.56C5.627 11.85 7.648 11 10 11s4.373.85 5.863 2.44c1.477 1.58 2.366 3.8 2.632 6.46l.11 1.1H1.395l.11-1.1c.266-2.66 1.155-4.88 2.632-6.46z"
                          ></path>
                        </g>
                      </svg>
                    </div>
                    <div class="txt">
                      {{ $t("postlist.more.unfollow") }} @{{ username }}
                    </div>
                  </div>
                </div>
                <!-- 隐藏用户 -->
                <div v-if="user_id != current_user_id">
                  <div class="item">
                    <div class="ico">
                      <svg viewBox="0 0 24 24">
                        <g>
                          <path
                            d="M18 6.59V1.2L8.71 7H5.5C4.12 7 3 8.12 3 9.5v5C3 15.88 4.12 17 5.5 17h2.09l-2.3 2.29 1.42 1.42 15.5-15.5-1.42-1.42L18 6.59zm-8 8V8.55l6-3.75v3.79l-6 6zM5 9.5c0-.28.22-.5.5-.5H8v6H5.5c-.28 0-.5-.22-.5-.5v-5zm6.5 9.24l1.45-1.45L16 19.2V14l2 .02v8.78l-6.5-4.06z"
                          ></path>
                        </g>
                      </svg>
                    </div>
                    <div class="txt">{{ $t("postlist.more.mute") }}</div>
                  </div>
                </div>
                <!-- 屏蔽用户 -->
                <div v-if="user_id != current_user_id">
                  <div class="item">
                    <div class="ico">
                      <svg viewBox="0 0 24 24">
                        <g>
                          <path
                            d="M12 3.75c-4.55 0-8.25 3.69-8.25 8.25 0 1.92.66 3.68 1.75 5.08L17.09 5.5C15.68 4.4 13.92 3.75 12 3.75zm6.5 3.17L6.92 18.5c1.4 1.1 3.16 1.75 5.08 1.75 4.56 0 8.25-3.69 8.25-8.25 0-1.92-.65-3.68-1.75-5.08zM1.75 12C1.75 6.34 6.34 1.75 12 1.75S22.25 6.34 22.25 12 17.66 22.25 12 22.25 1.75 17.66 1.75 12z"
                          ></path>
                        </g>
                      </svg>
                    </div>
                    <div class="txt">{{ $t("postlist.more.block") }}</div>
                  </div>
                </div>
                <!-- 帖子互动量 -->
                <div class="item">
                  <div class="ico">
                    <svg viewBox="0 0 24 24">
                      <g>
                        <path
                          d="M8.75 21V3h2v18h-2zM18 21V8.5h2V21h-2zM4 21l.004-10h2L6 21H4zm9.248 0v-7h2v7h-2z"
                        ></path>
                      </g>
                    </svg>
                  </div>
                  <div class="txt">{{ $t("postlist.more.visitcounts") }}</div>
                </div>
                <!-- 举报帖子 -->
                <div v-if="user_id != current_user_id">
                  <div class="item">
                    <div class="ico">
                      <svg viewBox="0 0 24 24">
                        <g>
                          <path
                            d="M3 2h18.61l-3.5 7 3.5 7H5v6H3V2zm2 12h13.38l-2.5-5 2.5-5H5v10z"
                          ></path>
                        </g>
                      </svg>
                    </div>
                    <div class="txt">{{ $t("postlist.more.reportpost") }}</div>
                  </div>
                </div>
              </div>
              <!-- 更多 -->
              <div slot="reference" class="more" :title="$t('postlist.more')">
                <svg viewBox="0 0 24 24">
                  <g>
                    <path
                      d="M3 12c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm9 2c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm7 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"
                    ></path>
                  </g>
                </svg>
              </div>
            </el-popover>
          </div>
        </div>
        <!-- ip归属 -->
        <div class="ipaddr_panel">
          <div class="ip">{{ $t("postlist.ipaddr") }}{{ post_city }}</div>
        </div>
        <!-- 贴文评论区域 评论父id大于0才显示回复 -->
        <div v-if="pl_parent_id > 0" class="comments_to">
          <span>回复</span
          ><router-link :to="'/PersonView/' + reply_user_id"
            >@{{ reply_user_account }}</router-link
          >
        </div>
        <!-- 贴文内容 -->
        <div class="post_content" v-html="postContent"></div>
        <!-- 贴文在线翻译 -->
        <!-- 翻译按钮 -->
        <div class="post_do_translation">
          <span @click="translate_post">{{ $t("postlist.transaltion") }}</span>
        </div>
        <!-- 翻译后内容 -->
        <div class="post_translation" v-html="translate_result"></div>
        <!-- 贴文图片所在位置 -->
        <div class="post_pic" v-if="showImageVisiable">
          <!-- 显示一张图片 -->
          <div v-if="showImageVisiable">
            <!-- 显示一张图片 -->
            <div v-if="tp_url.length == 1">
              <div v-for="(item, index) in tp_url" :key="index">
                <img class="single-pic" :src="item" alt="" />
              </div>
            </div>
            <!-- 显示多张图片 -->
            <div class="mulit-list" v-else>
              <div v-for="(item, index) in tp_url" :key="index">
                <img class="mulit-pic" :src="item" alt="" />
              </div>
            </div>
          </div>
        </div>
        <!-- 贴文视频所在位置 -->
        <div class="post_video" v-if="showVideoVisiable">
          <video class="video" controls>
            <source :src="videosrc" type="video/mp4" />
          </video>
        </div>
        <!-- 转发引用内容所在位置 -->
        <div v-if="zf_parent_id > 0" class="zf_panel">
          <!-- 引用的内容存在 -->
          <div v-if="zf_postData != null">
            <PostPanel :key="zf_postDataLoaded" :postData="zf_postData" />
          </div>
          <!-- 引用的内容被屏蔽或者删除 -->
          <div class="none_quote" v-else>引用的内容不存在</div>
        </div>
        <!-- 发帖时间 -->
        <div class="post_time">
          {{ post_time }}
        </div>
        <!-- 转发/点赞/访问数量 -->
        <div class="post_opr">
          <!-- 评论 -->
          <div
            class="ltr"
            :title="$t('postlist.reply')"
            @click="replyDialogVisible = true"
          >
            <div class="icon">
              <div class="item">
                <svg viewBox="0 0 24 24">
                  <g>
                    <path
                      d="M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z"
                    ></path>
                  </g>
                </svg>
              </div>
            </div>
            <span class="num">{{ pl_counts }}</span>
          </div>
          <!-- 转发 -->
          <!-- 转发弹出层 zf_selected==0 说明没有转发，否则有转发操作 -->
          <div v-if="zf_selected == 0">
            <el-popover
              placement="top"
              v-model="quotePopoverVisible"
              :visible-arrow="false"
              trigger="click"
            >
              <div class="pop_zf_panel">
                <div class="zf_btn" @click="addQuickZF">
                  <div class="icon">
                    <svg viewBox="0 0 24 24">
                      <g>
                        <path
                          d="M4.5 3.88l4.432 4.14-1.364 1.46L5.5 7.55V16c0 1.1.896 2 2 2H13v2H7.5c-2.209 0-4-1.79-4-4V7.55L1.432 9.48.068 8.02 4.5 3.88zM16.5 6H11V4h5.5c2.209 0 4 1.79 4 4v8.45l2.068-1.93 1.364 1.46-4.432 4.14-4.432-4.14 1.364-1.46 2.068 1.93V8c0-1.1-.896-2-2-2z"
                        ></path>
                      </g>
                    </svg>
                  </div>
                  <div class="txt">{{ $t("postlist.quickquote") }}</div>
                </div>
                <div class="yy_btn" @click="quoteDialogVisible = true">
                  <div class="icon">
                    <svg viewBox="0 0 24 24">
                      <g>
                        <path
                          d="M14.23 2.854c.98-.977 2.56-.977 3.54 0l3.38 3.378c.97.977.97 2.559 0 3.536L9.91 21H3v-6.914L14.23 2.854zm2.12 1.414c-.19-.195-.51-.195-.7 0L5 14.914V19h4.09L19.73 8.354c.2-.196.2-.512 0-.708l-3.38-3.378zM14.75 19l-2 2H21v-2h-6.25z"
                        ></path>
                      </g>
                    </svg>
                  </div>
                  <div class="txt">{{ $t("postlist.quote") }}</div>
                </div>
              </div>
              <!-- 转发图标 -->
              <div class="ltr" :title="$t('postlist.quote')" slot="reference">
                <div class="icon zhuanfa">
                  <div class="item">
                    <svg viewBox="0 0 24 24">
                      <g>
                        <path
                          d="M4.5 3.88l4.432 4.14-1.364 1.46L5.5 7.55V16c0 1.1.896 2 2 2H13v2H7.5c-2.209 0-4-1.79-4-4V7.55L1.432 9.48.068 8.02 4.5 3.88zM16.5 6H11V4h5.5c2.209 0 4 1.79 4 4v8.45l2.068-1.93 1.364 1.46-4.432 4.14-4.432-4.14 1.364-1.46 2.068 1.93V8c0-1.1-.896-2-2-2z"
                        ></path>
                      </g>
                    </svg>
                  </div>
                </div>
                <span class="num">{{ zf_counts }}</span>
              </div>
            </el-popover>
          </div>
          <!-- 取消快转 -->
          <div v-else>
            <el-popover
              placement="top"
              v-model="quotePopoverVisible"
              :visible-arrow="false"
              trigger="click"
            >
              <div class="pop_zf_panel">
                <div class="zf_btn" @click="cancelQuickZF">
                  <div class="icon">
                    <svg viewBox="0 0 24 24">
                      <g>
                        <path
                          d="M4.5 3.88l4.432 4.14-1.364 1.46L5.5 7.55V16c0 1.1.896 2 2 2H13v2H7.5c-2.209 0-4-1.79-4-4V7.55L1.432 9.48.068 8.02 4.5 3.88zM16.5 6H11V4h5.5c2.209 0 4 1.79 4 4v8.45l2.068-1.93 1.364 1.46-4.432 4.14-4.432-4.14 1.364-1.46 2.068 1.93V8c0-1.1-.896-2-2-2z"
                        ></path>
                      </g>
                    </svg>
                  </div>
                  <div class="txt">{{ $t("postlist.cancelquickquote") }}</div>
                </div>
                <div class="yy_btn" @click="quoteDialogVisible = true">
                  <div class="icon">
                    <svg viewBox="0 0 24 24">
                      <g>
                        <path
                          d="M14.23 2.854c.98-.977 2.56-.977 3.54 0l3.38 3.378c.97.977.97 2.559 0 3.536L9.91 21H3v-6.914L14.23 2.854zm2.12 1.414c-.19-.195-.51-.195-.7 0L5 14.914V19h4.09L19.73 8.354c.2-.196.2-.512 0-.708l-3.38-3.378zM14.75 19l-2 2H21v-2h-6.25z"
                        ></path>
                      </g>
                    </svg>
                  </div>
                  <div class="txt">{{ $t("postlist.quote") }}</div>
                </div>
              </div>
              <!-- 转发图标 -->
              <div
                class="ltr selected"
                :title="$t('postlist.cancelquickquote')"
                slot="reference"
              >
                <div class="icon zhuanfa">
                  <div class="item">
                    <svg viewBox="0 0 24 24">
                      <g>
                        <path
                          d="M4.5 3.88l4.432 4.14-1.364 1.46L5.5 7.55V16c0 1.1.896 2 2 2H13v2H7.5c-2.209 0-4-1.79-4-4V7.55L1.432 9.48.068 8.02 4.5 3.88zM16.5 6H11V4h5.5c2.209 0 4 1.79 4 4v8.45l2.068-1.93 1.364 1.46-4.432 4.14-4.432-4.14 1.364-1.46 2.068 1.93V8c0-1.1-.896-2-2-2z"
                        ></path>
                      </g>
                    </svg>
                  </div>
                </div>
                <span class="num">{{ zf_counts }}</span>
              </div>
            </el-popover>
          </div>

          <!-- 点赞/喜欢 操作切换 -->
          <div v-if="xh_selected == 0">
            <div class="ltr" @click="addXH" :title="$t('postlist.like')">
              <div class="icon xihuan">
                <div class="item">
                  <div>
                    <svg viewBox="0 0 24 24" aria-hidden="true">
                      <g>
                        <path
                          d="M16.697 5.5c-1.222-.06-2.679.51-3.89 2.16l-.805 1.09-.806-1.09C9.984 6.01 8.526 5.44 7.304 5.5c-1.243.07-2.349.78-2.91 1.91-.552 1.12-.633 2.78.479 4.82 1.074 1.97 3.257 4.27 7.129 6.61 3.87-2.34 6.052-4.64 7.126-6.61 1.111-2.04 1.03-3.7.477-4.82-.561-1.13-1.666-1.84-2.908-1.91zm4.187 7.69c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z"
                        ></path>
                      </g>
                    </svg>
                  </div>
                </div>
              </div>
              <span class="num">{{ xh_counts }}</span>
            </div>
          </div>
          <div v-else>
            <div
              class="ltr selected"
              @click="cancelXH"
              :title="$t('postlist.cancellike')"
            >
              <div class="icon xihuan">
                <div class="item">
                  <div class="poped">
                    <svg viewBox="0 0 24 24" aria-hidden="true">
                      <g>
                        <path
                          d="M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z"
                        ></path>
                      </g>
                    </svg>
                  </div>
                </div>
              </div>
              <span class="num xh">{{ xh_counts }}</span>
            </div>
          </div>
          <!-- 访问量 -->
          <div class="ltr" :title="$t('postlist.visitcounts')">
            <div class="icon">
              <div class="item">
                <svg viewBox="0 0 24 24" aria-hidden="true">
                  <g>
                    <path
                      d="M8.75 21V3h2v18h-2zM18 21V8.5h2V21h-2zM4 21l.004-10h2L6 21H4zm9.248 0v-7h2v7h-2z"
                    ></path>
                  </g>
                </svg>
              </div>
            </div>
            <span class="num">{{ fw_counts }}</span>
          </div>
          <!-- 分享 -->
          <div class="ltr" :title="$t('postlist.share')">
            <div class="icon">
              <div class="item">
                <svg
                  viewBox="0 0 24 24"
                  aria-hidden="true"
                  class="r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1hdv0qi"
                >
                  <g>
                    <path
                      d="M12 2.59l5.7 5.7-1.41 1.42L13 6.41V16h-2V6.41l-3.3 3.3-1.41-1.42L12 2.59zM21 15l-.02 3.51c0 1.38-1.12 2.49-2.5 2.49H5.5C4.11 21 3 19.88 3 18.5V15h2v3.5c0 .28.22.5.5.5h12.98c.28 0 .5-.22.5-.5L19 15h2z"
                    ></path>
                  </g>
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 回复窗口 -->
    <el-dialog
      :title="$t('postlist.reply')"
      :visible.sync="replyDialogVisible"
      :width="dialogFormWidth"
      :before-close="handleclose"
    >
      <UserReplyComponents
        :postData="postData"
        @reloadQuoteDataList="reloadData"
      />
    </el-dialog>
    <!-- 引用窗口 -->
    <el-dialog
      :title="$t('postlist.quote')"
      :visible.sync="quoteDialogVisible"
      :width="dialogFormWidth"
      :before-close="handleclose"
    >
      <UserQuoteComponents
        @reloadQuoteDataList="reloadData"
        :postData="postData"
      />
    </el-dialog>
    <!-- 用来快转组件 -->
    <div style="display: none">
      <UserQuoteComponents
        ref="quote"
        @reloadQuoteDataList="reloadData"
        :postData="postData"
      />
    </div>
  </div>
</template>
    <script>
//引入组件转发和引用区域组件
import PostPanel from "@/components/PostPanel.vue";
//弹出引用组件
import UserQuoteComponents from "@/components/UserQuoteComponents.vue";
//弹出回复组件
import UserReplyComponents from "@/components/UserReplyComponents.vue";

//获取统一请求接口
import {
  delPostByUserId,
  addPressXH,
  cancelPressXH,
  getZFPostInfoByPostId,
  getPostRelationByPostIdAndCurrentUserId,
  getIsFoByCurrentUserId,
  addUserFoPostUser,
  cancelUserFoPostUser,
} from "@/api";

export default {
  name: "ParentPostDetailsComponents",
  components: {
    PostPanel,
    UserQuoteComponents,
    UserReplyComponents,
  },
  props: {
    postData: {
      type: Object,
    },
  },
  data() {
    return {
      // postData: this.PostData,
      user_id: this.postData.user_id ? this.postData.user_id : 1,
      auth_id: this.postData.auth_id ? this.postData.auth_id : 0,
      current_user_id: JSON.parse(localStorage.getItem("user")).user_id
        ? JSON.parse(localStorage.getItem("user")).user_id
        : 1,
      username: this.postData.username ? this.postData.username : "测试",
      nickname: this.postData.user_nickname
        ? this.postData.user_nickname
        : "测试",
      headerImg: this.postData.user_headimg
        ? this.postData.user_headimg
        : require("@/assets/img/user.png"),
      headerBgImg: this.postData.user_bgimg
        ? this.postData.user_bgimg
        : require("@/assets/img/header_bg.jpg"), //this.postData.user_bgimg ||
      post_id: this.postData.post_id ? this.postData.post_id : 1,
      pl_parent_id: this.postData.pl_parent_id ? this.postData.pl_parent_id : 0,
      reply_user_id: this.postData.reply_user_id
        ? this.postData.reply_user_id
        : 0,
      reply_user_account: this.postData.reply_user_account
        ? this.postData.reply_user_account
        : "null",
      zf_parent_id: this.postData.zf_parent_id ? this.postData.zf_parent_id : 0,
      zf_postData: null,
      zf_postDataLoaded: false,
      postContent: this.postData.post_content
        ? this.addTagToLink(this.replace_em(this.postData.post_content))
        : "",
      showImageVisiable: false,
      imagesrc: require("@/assets/img/pic01.jpg"),
      user_info: this.postData.user_info
        ? this.postData.user_info
        : "该用户还没填写任何信息",
      user_fo: this.postData.user_fo
        ? this.formatCount(this.postData.user_fo)
        : 0, //关注人数
      user_fans: this.postData.user_fans
        ? this.formatCount(this.postData.user_fans)
        : 0, //被关注数
      tp_url: [],
      showVideoVisiable: false,
      videosrc: this.postData.sp_url ? this.postData.sp_url : "",
      zf_counts: this.postData.zf_counts
        ? this.formatCount(this.postData.zf_counts)
        : 0, //转发数
      pl_counts: this.postData.pl_counts
        ? this.formatCount(this.postData.pl_counts)
        : 0, //评论数
      xh_counts: this.postData.xh_counts
        ? this.formatCount(this.postData.xh_counts)
        : 0, //喜欢点赞数
      fw_counts: this.postData.fw_counts
        ? this.formatCount(this.postData.fw_counts)
        : 0, //访问数
      post_edit: this.postData.post_edit ? this.postData.post_edit : 0, //是否编辑过
      post_time: this.postData.post_time ? this.postData.post_time : "", //发帖时间
      post_day: this.postData.post_day ? this.postData.post_day : "", //发帖时间格式化
      post_city: this.postData.post_city
        ? this.postData.post_city
        : "该用户来自火星", //IP归属地
      zf_selected: this.postData.zf_selected ? this.postData.zf_selected : 0, //是否已转发
      xh_selected: 0, //是否已点赞
      replyDialogVisible: false,
      quoteDialogVisible: false,
      quotePopoverVisible: false,
      translate_result: "", //翻译后内容
      is_fo: 0, //关注功能相关
      foButtonText: "",
      postForm: {
        post_user_id: this.postData.user_id ? this.postData.user_id : 1,
        current_user_id: this.current_user_id,
      },
      parentPostData: {}, //评论回复的主贴文
    };
  },
  computed: {
    //动态计算浏览器宽度来设定dialog宽度
    dialogFormWidth() {
      let w = window.innerWidth;
      if (w <= 720) {
        return "100%";
      } else if (w < 1280) {
        return "600px";
      } else if (w < 1920) {
        return "600px";
      } else {
        return "600px";
      }
    },
  },
  //初始化
  mounted() {
    this.reloadinitData();
  },
  //方法
  methods: {
    //reloaddata
    reloadinitData() {
      this.initData();
      //获取当前帖子是否为转贴引用
      this.getZFPostByPostId();
      //获取当前用户是否对当前帖子进行了转发和点赞操作
      this.getPostOprInfoByCurrentUserAndPostId();
      //获取当前用户是否关注发帖者
      this.getIsFoByCurrentUserId();
    },
    initData() {
      //加载用户信息图片和视频
      let tp_str = this.postData.tp_url;
      let sp_str = this.postData.sp_url;
      if (tp_str) {
        this.tp_url = this.postData.tp_url.split("|");
        this.showImageVisiable = true;
        return;
      }
      if (sp_str) {
        this.videosrc = sp_str;
        this.showVideoVisiable = true;
        return;
      }
    },
    //当前用户删除自己的帖子
    delPostByUserId() {
      this.$confirm("是否删除？")
        .then(() => {
          this.delPostByUserIdHandler();
        })
        .catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // });
        });
    },
    async delPostByUserIdHandler() {
      let res = await delPostByUserId({
        user_id: this.user_id,
        post_id: this.post_id,
      });
      if (res.state == 200) {
        this.reloadinitData();
        //此处为帖子详细内容页面删除，删除后要返回首页
        this.$router.push("/");
      }
    },
    //转发重新加载
    reloadData() {
      this.handleclose();
      this.$emit("reloadDataList");
    },
    handleclose() {
      this.replyDialogVisible = false;
      this.quoteDialogVisible = false;
    },
    //快转操作
    addQuickZF() {
      this.$refs.quote.addQuickQuote();
      this.zf_selected = 1; //设置
      this.zf_counts = this.zf_counts + 1;
      this.quotePopoverVisible = false;
      // this.reloadinitData();
    },
    //取消快转操作
    cancelQuickZF() {
      this.$refs.quote.cancelQuickQuote();
      this.zf_selected = 0; //设置
      this.zf_counts = this.zf_counts - 1;
      this.quotePopoverVisible = false;
      // this.reloadinitData();
    },
    //点赞操作
    async addXH() {
      let res = await addPressXH({
        post_id: this.post_id,
        opr_user_id: this.current_user_id,
      });
      if (res.state == 200) {
        this.xh_selected = 1;
        this.xh_counts++;
        this.$message({
          message: res.message,
          type: "success",
        });
      } else {
        this.$message.error(res.message);
      }
    },
    //取消点赞操作
    async cancelXH() {
      let res = await cancelPressXH({
        post_id: this.post_id,
        opr_user_id: this.current_user_id,
      });
      if (res.state == 200) {
        this.xh_selected = 0;
        this.xh_counts--;
        this.$message({
          message: res.message,
          type: "success",
        });
      } else {
        this.$message.error(res.message);
      }
    },
    //如果有转发或引用内容则通过转发的zf_parent_id查询帖子
    async getZFPostByPostId() {
      let id = this.zf_parent_id;

      if (id == 0) {
        return;
      }

      let res = await getZFPostInfoByPostId({ post_id: id });
      if (res.state == 200) {
        this.zf_postData = res.data;
        this.zf_postDataLoaded = true;
      }
    },
    //查询当前用户是否对当前帖子进行了转发和点赞
    async getPostOprInfoByCurrentUserAndPostId() {
      let post_id = this.post_id;
      let current_user_id = this.current_user_id;

      let res = await getPostRelationByPostIdAndCurrentUserId({
        post_id: post_id,
        opr_user_id: current_user_id,
      });

      if (res.state == 200) {
        this.zf_selected = res.data.zf_selected;
        this.xh_selected = res.data.xh_selected;
      }
    },
    //查询当前用户是否关注了当前发帖人
    async getIsFoByCurrentUserId() {
      this.postForm.post_user_id = this.user_id;
      this.postForm.current_user_id = this.current_user_id;

      let res = await getIsFoByCurrentUserId(this.postForm);

      if (res.state == 200) {
        this.is_fo = res.data;
        this.foButtonText = res.message;
      }
    },
    //点击关注
    async foUser() {
      this.postForm.post_user_id = this.user_id;
      this.postForm.current_user_id = this.current_user_id;

      let res = await addUserFoPostUser(this.postForm);
      if (res.state == 200) {
        this.reloadinitData();
        this.$message({
          message: res.message,
          type: "success",
        });
      } else {
        this.$message.error(res.message);
      }
    },
    //取消关注
    async cancelfoUser() {
      this.postForm.post_user_id = this.user_id;
      this.postForm.current_user_id = this.current_user_id;

      let res = await cancelUserFoPostUser(this.postForm);
      if (res.state == 200) {
        this.reloadinitData();
        this.$message({
          message: res.message,
          type: "success",
        });
      } else {
        this.$message.error(res.message);
      }
    },
    //格式化表情包显示结果
    replace_em(str) {
      str = str.replace(/\</g, "&lt;");

      str = str.replace(/\>/g, "&gt;");

      str = str.replace(/\n/g, "<br/>");

      str = str.replace(
        /\[2023_([0-9]*)\]/g,
        '<img src="/emot/2023_$1.png" border="0" />'
      );

      return str;
    },
    //内容格式化，将每个#标签#转换成我们系统的查询链接
    contentReplace() {
      this.postContent = this.addTagToLink(this.postContent);
    },
    //递归算法替换#标签内的内容
    addTagToLink(str) {
      let reg = /(?:#)(.[^#]*)(?:#)/g;

      let tagLink = str.match(reg);
      let finalStr = "";
      finalStr = str;
      if (!tagLink) {
        //没有匹配
        // console.log(str);
        return str;
      } else {
        tagLink.forEach((item) => {
          const content =
            '<a class="title_link" href="/#/Search?q=' +
            item.replaceAll("#", "%23") +
            '">' +
            item +
            "</a>";
          //对需要替换的字符串多次替换
          finalStr = finalStr.replace(item, content);
        });
        return finalStr;
      }
    },
    //在线翻译
    async translate_post() {
      let appid = "appid";
      let salt = "1435660288";
      let key = "key";
      let sign = this.$md5(appid + this.postContent + salt + key);
      let params = {
        q: this.postContent,
        from: "auto",
        to: localStorage.getItem("lang") ? localStorage.getItem("lang") : "zh",
        appid: appid,
        salt: salt,
        sign: sign,
      };
      //使用jsonp解决跨域问题
      this.$jsonp("https://fanyi-api.baidu.com/api/trans/vip/translate", params)
        .then((res) => {
          // console.log(res);
          this.translate_result = res.trans_result[0].dst;
        })
        .catch((error) => {
          console.log(error);
          this.translate_result = "翻译服务器异常";
        });
    },
    //关注/被关注数量格式化
    formatCount(counts) {
      const number = counts;
      let endValue;
      //为空
      if (!number) {
        return 0;
      }
      //小于1000
      if (number < 1000) {
        endValue = number;
      }
      //大于1000
      if (number >= 1000) {
        endValue = new Intl.NumberFormat().format(number);
      }
      //大于10000
      if (number > 10000) {
        endValue = (number / 10000).toFixed(this.decimals) + "万";
      }
      //大于一千万
      if (number > 10000000) {
        endValue = (number / 10000000).toFixed(this.decimals) + "千万";
      }
      //大于一亿
      if (number > 100000000) {
        endValue = (number / 100000000).toFixed(this.decimals) + "亿";
      }
      return endValue;
    },
  },
  //监听外部参数实时更新子组件内部变量
  watch: {
    postData(newValue) {
      if (newValue) {
        this.user_id = newValue.user_id;
        return;
      }
    },
    immediate: true,
  },
};
</script>
    <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.post_parent_list {
  /* padding: 0 16px; */
  display: flex;
  flex-direction: column;
  max-width: 600px;
}
/* 评论回复的主帖文 */
/* 头像连接线 */
.reply_line {
  position: absolute;
  top: 70px;
  left: 26px;
  border-left: 2px solid #939393;
  height: 90%;
}
/* 帖子内容样式 */
.post_list_item {
  position: relative;
  display: flex;
  flex: 1;
}

.post_list_item .item_header {
  width: 52px;
  height: 52px;
  margin-top: 10px;
  margin-right: 12px;
  position: relative;
}

/* 头像弹出信息 */
.item_header .popcard {
  position: absolute;
  top: 55px;
  left: 0;
  display: none;
  z-index: 49;
}
/* 鼠标经过弹出 */
.item_header:hover .popcard {
  display: block;
}

.popcard_panel {
  width: 334px;
  max-height: 215px;
  background: #ffffff;
  border: 1px solid #c3c3c3;
  border-radius: 8px;
  overflow: hidden;
}

.popcard_header {
  position: relative;
  height: 122px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.ex-picture-img {
  border-radius: inherit;
  /* 放置图片拉伸 */
  object-fit: cover;
  width: 334px;
  height: 122px;
}

.pop_h {
  position: absolute;
  transform: translate(-50%);
  left: 50%;
  top: 5px;
}

.pop_name {
  position: absolute;
  transform: translate(-50%);
  left: 50%;
  top: 70px;
}

.pop_auth {
  position: absolute;
  transform: translate(-50%);
  left: 50%;
  top: 95px;
  font-size: 12px;
}

.pop_h_img {
  border: 1px solid #fff;
  width: 52px;
  height: 52px;
  border-radius: 50%;
}

.u_fo {
  position: absolute;
  right: 10px;
  top: 10px;
}

/* 弹出个性信息 */
.pop_info {
  padding: 10px;
  font-size: 13px;
  height: 42px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.pop_fo {
  text-align: center;
  color: #939393;
  font-size: 14px;
  margin: 5px 0;
}

.pop_fo b {
  color: #000;
}

.pop_fo span {
  margin-right: 15px;
}

.post_list_item a img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
}

.item_content {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  width: 100%;
}

.item_content a {
  color: #000;
}

.account_panel {
  display: flex;
  justify-content: space-between;
  width: 500px;
}

/* 账号信息部分 */
.account {
  display: flex;
}
.name {
  font-weight: bold;
  margin-right: 5px;
  line-height: 20px;
}

.auth {
  width: 20px;
  height: 20px;
  fill: rgb(29, 155, 240);
  cursor: pointer;
  margin-right: 5px;
}

.acc,
.date {
  color: rgb(83, 100, 113);
  line-height: 20px;
  margin-right: 5px;
}

.tip {
  color: #939393;
  font-size: 12px;
}

/* 更多 */

.account_panel .more {
  cursor: pointer;
}

.pop_panel {
  display: flex;
  flex-direction: column;
}

.pop_panel .item {
  padding: 12px 16px;
  display: flex;
}

.pop_panel .item:hover {
  background-color: #ebe6e6;
  border-radius: 10px;
}

.pop_panel .item .ico {
  color: rgba(15, 20, 25, 1);
  width: 18.75px;
  height: 18.75px;
  padding-right: 12px;
}

.pop_panel .item .txt {
  font-weight: 700;
  color: #000;
}

.pop_panel .item svg.del {
  fill: rgb(244, 33, 46);
}
.pop_panel .item .del {
  color: rgb(244, 33, 46);
}

.account_panel .more:hover {
  width: 25px;
  height: 25px;
  background-color: #cccccc;
  border-radius: 50%;
}
.account_panel .more svg {
  width: 25px;
  height: 25px;
  fill: #7a7878;
}
/* ip归属 */
.ipaddr_panel {
  display: flex;
  color: rgb(83, 100, 113);
  font-size: 12px;
  margin-top: 8px;
}

.ipaddr_panel .p_day,
.ipaddr_panel .ip {
  line-height: 12px;
  margin-right: 5px;
}

/* 回复与评论 */
.comments_to {
  display: flex;
  font-size: 14px;
  margin-top: 10px;
}

.comments_to span {
  margin-right: 10px;
  line-height: 19px;
}

.comments_to a {
  color: rgb(29, 155, 240);
  line-height: 19px;
}

/* 贴文内容 */
.post_content,
.post_translation,
.post_do_translation {
  margin: 10px 0;
}

.post_do_translation span {
  font-size: 12px;
  cursor: pointer;
  color: rgb(13, 140, 238);
}

.post_translation {
  color: rgb(73, 81, 87);
}

/* 图片展示区域 */
.post_pic {
  display: flex;
}
.post_pic .single-pic {
  max-width: 480px;
  max-height: 360px;
  border-radius: 15px;
  margin-bottom: 10px;
}
.single-pic {
  max-width: 480px;
}
.mulit-list {
  display: flex;
  flex-wrap: wrap;
}
.mulit-pic {
  max-width: 240px;
  max-height: 160px;
  border-radius: 15px;
  margin-right: 10px;
}

/* 视频展示区域 */

.post_video .video {
  max-width: 480px;
  max-height: 300px;
}

/* 转发引用内容所在位置 */
.zf_panel {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.none_quote {
  display: flex;
  justify-content: center;
  width: 100%;
  text-align: center;
  padding: 30px 0;
}
/* 发帖时间 */
.post_time {
  color: rgb(83, 100, 113);
  font-size: 14px;
  margin: 10px 0;
}

/* 评论/转发/点赞/访问等 */
.post_opr {
  color: rgb(83, 100, 113);
  display: flex;
  fill: rgb(83, 100, 113);
  justify-content: space-between;
  margin-bottom: 10px;
  /* padding: 0 18px; */
  padding-right: 18px;
}

.post_opr .ltr {
  display: flex;
  cursor: pointer;
}

.post_opr .ltr .icon {
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  line-height: 46px;
}

.post_opr .ltr .icon:hover {
  background-color: rgba(29, 155, 240, 0.1);
  border-radius: 50%;
  color: rgb(29, 155, 240);
}

.post_opr .ltr .icon:hover svg {
  fill: rgb(29, 155, 240);
}

/* 转发操作按钮样式 */
.pop_zf_panel {
  display: flex;
  flex-direction: column;
  font-weight: 700;
  color: rgb(0, 0, 0);
}

.pop_zf_panel .zf_btn,
.pop_zf_panel .yy_btn {
  display: flex;
  cursor: pointer;
  padding: 5px 12px;
  line-height: 25px;
}

.pop_zf_panel .zf_btn:hover,
.pop_zf_panel .yy_btn:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.pop_zf_panel .zf_btn .icon,
.pop_zf_panel .yy_btn .icon {
  width: 25px;
  height: 25px;
  line-height: 35px;
}

.pop_zf_panel .icon svg {
  width: 18px;
  height: 18px;
  fill: rgb(0, 0, 0);
}

.post_opr .ltr .zhuanfa:hover {
  background-color: rgba(0, 186, 124, 0.1);
  border-radius: 50%;
}

.post_opr .ltr .zhuanfa:hover svg {
  fill: rgb(0, 186, 124);
}

.selected .num {
  color: rgb(0, 186, 124);
}

.selected svg {
  fill: rgb(0, 186, 124);
}

.post_opr .ltr .xihuan:hover {
  background-color: rgba(249, 24, 128, 0.1);
  border-radius: 50%;
}

.post_opr .ltr .xihuan:hover svg {
  fill: rgb(249, 24, 128);
}

.post_opr .ltr .num {
  line-height: 36px;
}

.post_opr svg {
  width: 1.25em;
  height: 1.25em;
}

.poped svg {
  color: rgb(249, 24, 128);
  fill: rgb(249, 24, 128);
}

.post_opr .selected .xh {
  color: rgb(249, 24, 128);
}

.post_opr span {
  display: inline-block;
  vertical-align: middle;
  font-size: 13px;
  line-height: 19px;
  /* padding: 0 14px; */
}

@media screen and (max-width: 720px) {
  .account_panel {
    width: 100%;
  }
  .post_pic img {
    width: 100%;
  }

  .post_opr span {
    padding: 0;
  }
}
</style>
    <style>
.u_fo span {
  font-weight: bold;
  color: #000;
}
</style>